import { useState, useTransition } from "react"
export default function Transition(){
  const [value,setValue] =useState('惠妹')
  const [list,setList]=useState([])
  const [pending,startTransition]=useTransition()
  const onChange=(e)=>{
    setValue(e.target.value)
    startTransition(()=>{
      setList([...['惠妹','郝小姐','娅姐'],...list])
    })
  }
  return (
    <>
    <div>{value}</div>
    <input  value={value} onChange={onChange} />
    <ul>
     {pending && <div>Loding.....等惠妹......</div>}
     {
      list.map(item=>{
        return <li key={item}>{item}</li>
      })
     }
    </ul>
    </>
  )
}